<nz-card [nzExtra]="actionsTemplate">
  <nz-skeleton [nzActive]="true" [nzLoading]="loading" [nzParagraph]="{ rows: 5 }">
    <nz-table [nzData]="filteredLabels" [nzLoading]="loading" class="custom-table"
              [nzNoResult]="'标签可以在更新或创建任务时创建。'"
              nzPaginationType="small" nzSize="small" #table>
      <thead>
      <tr>
        <th scope="col" [nzWidth]="'300px'" nzAlign="left">标签</th>
        <th scope="col" nzAlign="left" colspan="2">关联任务</th>
      </tr>
      </thead>
      <tbody>
      <tr *ngFor="let data of table.data; trackBy: trackByFn" class="actions-row">
        <td>
          <nz-tag
            [nzColor]="data.color_code + alpha"
            class="text-dark m-0"
            style="cursor: pointer;"
            nz-dropdown
            [nzDropdownMenu]="colorDropdown"
            nz-tooltip
            [nzTooltipTitle]="'点击更改颜色'"
            [nzTrigger]="'click'"
          >{{data.name}}</nz-tag>

          <nz-dropdown-menu #colorDropdown="nzDropdownMenu">
            <ul style="max-height: 200px;overflow: hidden; overflow-y: auto;" nz-menu nzSelectable>
              <li *ngFor="let item of colorCodes" (click)="updateColorCode(data.id, item)" nz-menu-item>
                <nz-tag [nzColor]="item + alpha" class="text-dark m-0 w-100">{{data.name}}</nz-tag>
              </li>
            </ul>
          </nz-dropdown-menu>
        </td>
        <td>{{data.usage}}</td>
        <td class="actions-col" nzAlign="center">
          <div class="actions">
            <nz-space>
              <button (nzOnConfirm)="deleteLabel(data)" nz-button nz-popconfirm nz-tooltip [nzOkText]="'是'"
                      [nzPopconfirmTitle]="'你确定吗？'" [nzSize]="'small'" [nzTooltipPlacement]="'top'"
                      [nzTooltipTitle]="'删除'"
                      [nzType]="'default'">
                <span nz-icon nzType="delete"></span>
              </button>
            </nz-space>
          </div>
        </td>
      </tr>
      </tbody>
    </nz-table>
  </nz-skeleton>
</nz-card>

<ng-template #actionsTemplate>
  <nz-space>
    <form *nzSpaceItem [nzLayout]="'vertical'" nz-form>
      <nz-input-group [nzSuffix]="suffixIconSearch">
        <input nz-input [(ngModel)]="labelsSearch" name="search" (ngModelChange)="searchLabels($event)"
               placeholder="按名称搜索"
               type="text"/>
      </nz-input-group>
      <ng-template #suffixIconSearch>
        <span nz-icon nzType="search"></span>
      </ng-template>
    </form>
    <worklenz-toggle-menu-button *nzSpaceItem [key]="menu.LABELS_MENU"></worklenz-toggle-menu-button>
  </nz-space>
</ng-template>
